<template>
  <div class="bigBox">
    <div class="box">
      <div class="header">
        <p>课程管理</p>
      </div>
      <div class="searchBox">
        <div class="tit">
          <span class="iconfont icon-fenlei-1 icon1"></span>筛选
        </div>
        <div class="row">
          <el-form :inline="true" class="demo-form-inline">
            <div class="aa">
              <el-form-item label="课程管理：" class="bb">
                <el-select v-model="state" placeholder="全部">
                  <el-option label="上架" value="上架"></el-option>
                  <el-option label="下架" value="下架"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="上传时间：">
                <el-col :span="11">
                  <el-date-picker
                    v-model="date1"
                    type="date"
                    placeholder="开始日期"
                    style="width: 100%"
                  />
                </el-col>
                <el-col :span="2" class="text-center"> - </el-col>
                <el-col :span="11">
                  <el-date-picker
                    v-model="date2"
                    placeholder="结束日期"
                    style="width: 100%"
                  />
                </el-col>
              </el-form-item>
            </div>
            <el-form-item label="输入搜索：">
              <el-input v-model="courses" placeholder="输入课程标题关键字……" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSearch" class="Btn">
                <span class="iconfont icon-shaixuanguolv icon2"></span>
                筛选
              </el-button>
              <el-button type="primary" @click="onClean" class="cleanBtn">
                清空筛选条件
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dataBox">
        <div class="row1">
          <div class="rowL">
            <span class="iconfont icon-liebiao"></span>课程列表
          </div>
          <div class="rowR">
            <el-button class="btn1" @click="openAdd">
              <span class="iconfont icon-jia"></span>
              新增课程</el-button
            >
            <RouterLink to="/home/deleteCourse" style="text-decoration: none">
              <el-button>
                <span class="iconfont icon-huishouzhan"></span>
                回收站</el-button
              >
            </RouterLink>
          </div>
        </div>
        <div>
          <el-table
            :header-cell-style="{
              background: '#9037f3',
              color: '#ffffff',
              textAlign: 'center',
            }"
            :rules="rules"
            ref="multipleTableRef"
            :data="tableData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="80" />
            <!-- <el-table-column label="编号">
              <template #default="scope">{{ scope.row.date }}</template>
            </el-table-column> -->
            <el-table-column property="id" label="编号" width="90" />
            <el-table-column
              property="coursename"
              label="课程名称"
              width="120"
            />
            <el-table-column property="url" label="列表图" width="152">
              <template #default="scope">
                <img :src="scope.row.url" style="width: 97px; height: 54px" />
              </template>
            </el-table-column>
            <el-table-column
              property="state"
              label="课程上架"
              width="80"
              color="red"
            />
            <el-table-column
              property="courseprice"
              label="报名费（元）"
              width="80"
            />
            <el-table-column property="sales" label="销量" width="80" />
            <el-table-column property="persion" label="上传人" width="80" />
            <el-table-column
              property="updatetime"
              label="上传时间"
              width="143px"
            />
            <el-table-column property="msg" label="操作">
              <template #default="scoped">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="openEdit(scoped.row.id)"
                  >编辑</el-button
                >
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click="inBin(scoped.row.id)"
                  >加入回收站</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="dataBoxButton">
          <div class="allToDel" @click="allIn">批量加入回收站</div>
          <div class="page">
            <div class="total">
              <span style="font-family: '思源黑体'; font-weight: 400">共</span>
              <span
                style="
                  font-family: '思源黑体 Bold', '思源黑体 ,Regular';
                  font-weight: 700;
                  color: #9137f3;
                "
                >{{ Math.ceil(total / limit) }}</span
              >
              <span style="font-family: '思源黑体'; font-weight: 400">页/</span>
              <span
                style="
                  font-family: '思源黑体 Bold', '思源黑体 Regular', '思源黑体';
                  font-weight: 700;
                  color: #9137f3;
                "
                >{{ total }}</span
              >
              <span style="font-family: '思源黑体'; font-weight: 400"
                >条数据</span
              >
              <el-pagination
                v-model:page-size="limit"
                :page-sizes="[10, 20, 30]"
                default
                background
                @current-change="changePage"
                layout="prev, pager, next"
                :total="total"
                class="mt-4"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import axios from '../utils/http'
import { reactive, onMounted, ref } from 'vue'
import {
  ElCol,
  ElDatePicker,
  ElPagination,
  ElButton,
  ElForm,
  ElFormItem,
  ElTableColumn,
  ElInput,
  ElSelect,
  ElOption,
  ElTable,
  ElMessage,
} from 'element-plus'

import { RouterLink } from 'vue-router'
let total = ref()
let limit = ref(10)
let page = ref(1)
//搜索
const searchForm = ref({
  state: '',
  courses: '',
  date1: '',
  date2: '',
})

//表格渲染
let tableData = ref([])
const getData = function () {
  axios({
    url: '/course/list',
    method: 'get',
    params: {
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log(data)
    if (data.code == 0) {
      tableData.value = data.data.list
      //console.log(tableData)

      total.value = data.data.totalCount
      //console.log(total.value)
    }
  })
}
// 获取选择的所有数据的id
let ids = ''
let idS = []
const multipleSelection = ref([])
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log('multipleSelection', multipleSelection.value)
}
//循环取id
const getId = function () {
  for (let e of multipleSelection.value) {
    idS.push(e.id)
  }
  console.log(idS, '循环id打印')
  for (let i = 0; i < idS.length; i++) {
    if (i == idS.length - 1) {
      ids += `ids=${idS[i]}`
    } else {
      ids += `ids=${idS[i]}&`
    }
  }
  console.log(5555, ids)
}
// 一条加入回收站
const inBin = (id) => {
  axios({
    url: '/course/toRabbish',
    method: 'post',
    params: {
      id: id,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: '加入回收站成功',
        type: 'success',
      })
      getData()
    }
  })
}
// 批量加入回收站
const allIn = () => {
  getId()
  axios({
    url: `/course/allToRabbish?${ids}`,
    method: 'post',
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: '批量加入回收站成功',
        type: 'success',
      })
      getData()
    }
  })
}

//筛选按钮
let state = ref('')
let date1 = ref('')
let date2 = ref('')
let courses = ref('')

const onSearch = () => {
  console.log(state.value, 'aaa')
  if (state.value == '上架') {
    state.value = 1
  } else if (state.value == '下架') {
    state.value = 0
  }
  console.log(state.value, 'bbb')
  axios({
    url: '/course/list/terms',
    params: {
      state: state.value,
      starttime: date1.value,
      endtime: date2.value,
      courses: courses.value,
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    console.log('筛选的', data)
    if (data.code == 0) {
      tableData.value = data.data.list
      total.value = data.total
    }
  })
}
//清空筛选条件
const onClean = () => {
  state.value = ''
  date1.value = ''
  date2.value = ''
  courses.value = ''
  getData()
}

//分页
let changePage = function (value) {
  page.value = value
  getData()
}

//跳转新增页面
const router = useRouter()
const openAdd = function () {
  router.push({
    name: 'addCourses',
  })
}
const openEdit = (id) => {
  router.push({
    name: 'editCourses',
    query: { id: id },
  })
}
//挂载后
onMounted(() => {
  getData()
})
</script>
<style lang="less" scoped>
@import url('../assets/J-iconfont/iconfont.css');
* {
  margin: 0;
  padding: 0;
}
.bigBox {
  display: flex;
  justify-content: center;
  background-color: #fcfcfc;
}
.box {
  width: 1100px;
  margin: 0 127px;
  // border: 1px solid aqua;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  .header {
    margin-top: 25px;
    margin-bottom: 25px;
    p {
      font-size: 24px;
      color: #9037f3;
      font-weight: 700;
    }
  }
  .searchBox {
    background-color: #ffffff;
    border: 1px solid #e4e4e4;
    width: 820px;
    margin-bottom: 15px;
    padding: 20px 280px 37px 30px;
    .tit {
      color: #999999;
      font-size: 14px;
      margin-bottom: 25px;

      span {
        width: 16px;
        height: 16px;
      }
    }
    .aa {
      width: 820px;
      display: flex;
      margin-bottom: 30px;
    }
  }
}
.bb {
  margin-right: 50px;
}
.Btn {
  width: 98px;
  height: 36px;
  margin-left: 20px;
}
.cleanBtn {
  border: none;
  color: #9037f3;
  background-color: #ffffff;
  font-size: 12px;
  line-height: 36px;
  margin-left: 30px;
}
.icon2 {
  margin-right: 8px;
}
.iconfont,
.icon-fenlei-1,
.icon1 {
  font-size: 16px;
}

.dataBox {
  background-color: #ffffff;
  border: 1px solid #e4e4e4;
  width: 1070px;
  padding: 14px 30px 40px 30px;
  .row1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 25px;
    .rowL {
      color: #999999;
      font-size: 14px;
      margin-bottom: 25px;
      line-height: 32px;
      span {
        width: 16px;
        height: 16px;
      }
    }
    .rowR {
      .el-button {
        border: 1px solid #9037f3;
        color: #9037f3;
        width: 99px;
        height: 32px;
        // margin-right: 20px;

        span {
          vertical-align: middle;
          margin-right: 10px;
          color: #9037f3;
        }
      }
    }
  }
}
.btn1 {
  margin-right: 20px;
}
.dataBoxButton {
  display: flex;
  justify-content: space-between;
  margin-top: 60px;
  .allToDel {
    margin-left: 5px;
    font-size: 14px;
    color: #999999;
    line-height: 32px;
  }
}
// 底部批量、分页
.total {
  // border: 1px solid blue;
  display: flex;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
}
</style>
<style>
.el-input__wrapper {
  width: 162px;
  height: 35px;
}

.el-form-item__label {
  line-height: 35px;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #333333;
}
.el-col-2 {
  text-align: center;
  padding-left: 7px;
}
.el-button--primary {
  width: 98px;
  height: 36px;
  font-size: 13px;
  line-height: 36px;
  text-align: center;
  background-color: #9037f3;
  border: none;
}
.el-table__header-wrapper {
  color: #ffffff;
  text-align: center;
}
.el-table--enable-row-transition .el-table__body td.el-table__cell {
  text-align: center;
  font-size: 12px;
  height: 90px;
}
.el-button,
.el-button--primary,
.el-button--small,
.is-link {
  width: 60px;
}
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
  color: #9239f3;
  background-color: #ffffff;
  margin-left: 10px;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  color: #9239f3;
  background-color: #ffffff;
  border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
  color: #ffffff;
  background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
  color: #ffffff;
  background-color: #9239f3;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>
